<template>
 <div class="big">
         <div class="shadow">
             <el-row :gutter="20">
                 <el-col :span="4" v-for="(card,key) in toolCards" :key="key" @click.native="toTarget(card.name)">
                      <el-card shadow="hover" class="grid-content">
                        <i :class="card.icon" :style="{color:card.color}"></i>
                        <p>{{card.label}}</p>
                    </el-card>
                 </el-col>
            </el-row>
         </div>
 </div>

</template>

<script>
import musicPlayer from "./component/musicPlayer"
import TodoList from "./component/todoList"
import { mapGetters } from 'vuex'
export default {
  name: 'Dashboard',
  data() {
    return {
        toolCards:[
            {
                label:"发布任务",
                icon:"el-icon el-icon-monitor",
                name:"Publish",
                color:"#ff9c6e"
            },
            {
                label:"Web站点",
                icon:"el-icon el-icon-setting",
                name:"domainList",
                color:"#69c0ff"
            },
            {
                label:"Nginx集群",
                icon:"el-icon el-icon-menu",
                name:"nginxCluster",
                color:"#b37feb"
            },
            {
                label:"Pool集群",
                icon:"el-icon el-icon-cpu",
                name:"poolCluster",
                color:"#ffd666"
            },
            {
                label:"SSL证书",
                icon:"el-icon el-icon-document-checked",
                name:"Cert",
                color:"#ff85c0"
            },
            {
                label:"关于我们",
                icon:"el-icon el-icon-user",
                name:"about",
                color:"#5cdbd3"
            }

        ]
    }
  },
   computed: {
    ...mapGetters('user', ['userInfo'])
  },
    components:{
        musicPlayer,  //音乐播放器
        TodoList, //TodoList
        // RaddarChart, //雷达图
        // stackMap, //堆叠图
        // Sunburst, //旭日图
    },
    methods:{
      toTarget(name){
          this.$router.push({name})
      }
    },
}
</script>

<style lang="scss" scoped>
    .big{
        margin:100px 0 0 0;
        padding-top: 0;
        background-color: rgb(243,243,243);
        padding-top: 15px;
        .top{
            width: 100%;
            height: 360px;
            margin-top: 20px;
            overflow: hidden;
            .chart-container{
                position: relative;
                width: 100%;
                height: 100%;
                padding: 20px;
                background-color: #fff;
            }
        }
        .mid{
            width: 100%;
            height: 380px;
            .chart-wrapper {
                height: 340px;
                background: #fff;
                padding: 16px 16px 0;
                margin-bottom: 32px;
            }
        }
        .bottom{
            width: 100%;
            height: 300px;
            // margin: 20px 0;
            .el-row{
                margin-right: 4px !important;
            }
            .chart-player{
                width: 100%;
                height: 270px;
                padding: 10px;
                background-color: #fff;
            }
        }
    }

</style>
